<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>入口设置</span>
      </div>
    </div>
    <div class="flex-bet">
      <div class="storeItem pad_20 bflex-5 mar_r20">
        <div class="flex-bet">
          <div class="flex">
            <div class="shimg mar_lr10">
              <img src="../../assets/shop/shimg.png" class />
            </div>
            <div>
              <div class="shtitle">已创建门店：{{shopCount}}</div>
              <div class="color_3 fon_14 mar_t10">
                还可创建门店：
                <span class="wei subjectcolor2">{{shopNum}}</span>，如需创建更多门店请联系管理员咨询！
              </div>
              <div class="flex mar_t20 lllx">
                <div class="online-contact">
                  <el-button size="medium" plain>
                    <a :href="qqLinks" target="_blank" class="online-contact-btn">立即联系</a>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="codeimg flex-center">
              <img src="../../assets/shop/codeimg.png" class />
              <!--              <el-image src="./src/assets/shop/codeimg.png" fit="cover"></el-image>-->
            </div>
          </div>
        </div>
      </div>
      <div class="storeItem pad_20 bflex-5">
        <div class="flex-bet">
          <div class="flex">
            <div class="shimg mar_lr10">
              <img src="../../assets/shop/shimg.png" class />
            </div>
            <div>
              <div class="shtitle color_3">
                门店后台管理地址
                <span class="fon_12 color_9 fnormal mar_l10">请勿在同一浏览器同时打开门店后台，防止数据错乱！</span>
              </div>
              <!--                            <div class="color_3 fon_14 mar_t10">请勿在同一浏览器同时打开门店后台，防止数据错乱！</div>-->
              <div class="color_3 fon_14 mar_t10">链接地址：{{url}}</div>
              <div class="flex mar_t20">
                <div class="lllx mar_r10">
                  <el-button size="medium" plain @click="chickLogin">点击访问</el-button>
                </div>
                <el-button size="medium" plain @click="copyText(url)">复制链接</el-button>
              </div>
            </div>
          </div>
          <div>
            <div class="codeimg flex-center">
              <img src="../../assets/shop/codeimg.png" class />
              <!--              <el-image src="./src/assets/shop/codeimg.png" fit="cover"></el-image>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shuju_title mar_b20 mar_t20">
      <div class="shuju_title_text">
        <span>门店列表</span>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="门店列表" name="1"></el-tab-pane>
      <!--            <el-tab-pane label="已过期" name="2"></el-tab-pane>-->
      <el-tab-pane label="回收站" name="3"></el-tab-pane>
    </el-tabs>
    <div class="flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <div class="mar_t30 mar_b30">
          <el-form-item label="按关键字：">
            <el-input v-model="formInline.keyword" size="medium" placeholder="请输入关键字搜索" style="width: 180px" @input="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="按门店类别：">
            <el-select v-model="formInline.type" placeholder="请选择" @change="onSearch">
              <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="按门店区域：" class="mar_l20">
            <el-select v-model="formInline.areaId" placeholder="请选择" @change="onSearch">
              <el-option v-for="item in qyOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="按门店分组：" class="mar_l20">
            <el-select v-model="formInline.typeId" placeholder="请选择" @change="onSearch">
              <el-option v-for="item in fzOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="按门店标签：">
            <el-select v-model="formInline.label" placeholder="请选择" @change="onSearch">
              <el-option v-for="item in labelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!--      <div class="flex">-->
      <!--        <ul class="flex tablebtn">-->
      <!--          <li class="t_btn bor_dd curs">-->
      <!--            <el-button size="medium"  class="login-btn">删除</el-button>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--        <div class="mar_l20">-->
      <!--          <el-button type="primary" size="medium" @click="addshop()">添加门店</el-button>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div class="mar_b10" v-if="shopNum>0||shopNum=='无限'">
      <el-button type="primary" size="medium" @click="addshop()">新建门店</el-button>
    </div>
    <div class="mar_b10" v-else>
      <el-button type="info" size="medium" @click="addshop()">新建门店</el-button>
    </div>
    <div class="tabledata mar_t30">
      <el-table :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="商家名称" width="350">
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <div class>
                <img class="goodlogo bor_rad5" :src="scope.row.icon" />
              </div>
              <div class="mar_l10">
                <div class="flex">
                  <div class>{{scope.row.name}}</div>
                  <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                </div>
                <div class="fon_12 color_9">
                  类别：
                  <span v-if="scope.row.type=='1'">直营店</span>
                  <span v-else>加盟店</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="门店地址&联系电话" width="400">
          <template slot-scope="scope">
            <div>{{scope.row.address}}</div>
            <div>{{scope.row.storeTel}}</div>
          </template>
        </el-table-column>
        <!--      <el-table-column-->
        <!--              prop="psfs"-->
        <!--              label="配送方式"-->
        <!--      >-->
        <!--      </el-table-column>-->
        <!--                <el-table-column-->
        <!--                        prop="display"-->
        <!--                        label="所属分组"-->
        <!--                >-->
        <!--                    <template slot-scope="scope">-->
        <!--                        {{scope.row.typeName}}-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <el-table-column prop="display" label="总店抽佣" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.serviceCharge.type=='1'">
              <div>
                总店抽佣：{{scope.row.serviceCharge.goodsPlatformProportion}}%
                <span class="el-icon-edit-outline curs subjectcolor2" @click="handlestoreratio(scope.row)"></span>
              </div>
              <div>配送费：{{scope.row.serviceCharge.deliverPlatformProportion}}%</div>
              <div>包装费：{{scope.row.serviceCharge.boxPlatformProportion}}%</div>
            </div>
            <div v-if="scope.row.serviceCharge.type=='2'">
              <div>
                总店抽佣：{{scope.row.serviceCharge.goodsFixedMoney}}元
                <span class="el-icon-edit-outline curs subjectcolor2" @click="handlestoreratio(scope.row)"></span>
              </div>
              <div>配送费：{{scope.row.serviceCharge.deliverFixedMoney}}元</div>
              <div>包装费：{{scope.row.serviceCharge.boxFixedMoney}}元</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="display" label="显示状态" width="140">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="display" label="商品模式" width="200">
          <template slot-scope="scope">
<!--            <div @click="changeModel(scope.row)" class="curs subjectcolor2">商品模式</div>-->
            <div v-show="scope.row.goodsModel=='1'">模式一：<el-tag type="success" size="mini">同步总店商品</el-tag></div>
            <div v-show="scope.row.goodsModel=='2'">模式二：<el-tag size="mini">普通商品权限</el-tag></div>
            <div v-show="scope.row.goodsModel=='3'">模式三：<el-tag  type="danger" size="mini">超级商品权限</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="300">
          <template slot-scope="scope">
            <div class="flex" v-if="+scope.row.deleteAt>0">
              <el-button type="text" @click="handleDelete2(scope.row,3)">恢复</el-button>
              <el-button type="text" @click="handleDelete2(scope.row,4)">删除</el-button>
            </div>
            <div class="flex" v-else>
              <el-button type="text" @click="shopMange(scope.row)">门店管理</el-button>
              <el-button type="text" @click="shoparea(scope.row)">配送设置</el-button>
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
              <!--            <el-dropdown>-->
              <!--                                          <span class="curs mar_l10">-->
              <!--                                          更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
              <!--                                          </span>-->
              <!--              <el-dropdown-menu slot="dropdown">-->
              <!--                <el-dropdown-item>删除</el-dropdown-item>-->
              <!--              </el-dropdown-menu>-->
              <!--            </el-dropdown>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
      <editRatio ref="editRatio" @fetchData="fetchData"></editRatio>
    </div>
  </div>
</template>
<script>
import Edit from './components/shopselectmodel';
import EditRatio from './components/storeratio';
import { storeList, modifyStore, selectStoreCategory } from '@/api/shop';
import { mapMutations } from 'vuex';

export default {
  components: { Edit, EditRatio },
  created() {
    this.selectStoreCategory();
    if(this.$route.query.currentPage || this.$route.query.activeName){
      this.page.currentPage = this.$route.query.currentPage?+this.$route.query.currentPage:1
      this.activeName = this.$route.query.activeName?this.$route.query.activeName:'1'
      this.fetchData();
    }else{
      this.fetchData();
    }
  },
  data() {
    return {
      formInline: {
        keyword: '',
        typeId: '',
        type: '',
        areaId: '',
        label: ''
      },
      qqLinks: '',
      typeOptions: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '直营店'
        },
        {
          id: '2',
          name: '加盟店'
        }
      ],
      qyOptions: [],
      fzOptions: [],
      labelOptions: [],
      activeName: '1',
      shopNum: '',
      loading: false,
      tableData: [],
      list: [],
      selectRows: '',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      recycle: '2',
      shopCount: '',
      url: '',
      qq: ''
    };
  },
  methods: {
    ...mapMutations(['storeMsg']),
    handleLogin() {
      this.loading = true;
    },
    changeModel(row) {
      this.$refs['edit'].setStoreId(row.id);
      if (row.goodsModel) {
        this.$refs['edit'].showEdit(row);
      } else {
        // this.$refs["edit"].showEdit();
      }
    },
    addshop() {
      if (Number(this.shopNum) > 0 || this.shopNum == '无限') {
        this.$router.push(`/shopadd?currentPage=${this.page.currentPage}&activeName=${this.activeName}`);
      } else {
        this.$message.error('门店数量已用完，如需新建更多门店，请联系管理员咨询！');
      }
    },
    handleEdit(row) {
      this.$router.push(`/shopadd?id=${row.id}&currentPage=${this.page.currentPage}&activeName=${this.activeName}`);
    },
    handlestoreratio(row) {
      // this.$refs["editRatio"].setStoreId(row.id);
      if (row.id) {
        this.$refs['editRatio'].showEdit(row);
      } else {
        this.$refs['editRatio'].showEdit();
      }
    },
    async selectStoreCategory() {
      const { data } = await selectStoreCategory();
      this.qyOptions = data.area ? data.area : [];
      this.fzOptions = data.type ? data.type : [];
      this.labelOptions = data.label ? data.label : [];
    },
    async changeSwitch(row) {
      const { msg } = await modifyStore({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前门店吗？一旦删除后，门店数据将会清除，请谨慎操作！', null, async () => {
          const { msg } = await modifyStore({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyStore({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    handleDelete2(row, type) {
      if (type == '3') {
        this.$baseConfirm('你确定要恢复当前门店吗？', null, async () => {
          const { msg } = await modifyStore({ id: row.id, type });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      }
      if (type == '4') {
        this.$baseConfirm('你确定要彻底删除当前门店吗？一旦删除后，门店数据将会清除，请谨慎操作！', null, async () => {
          const { msg } = await modifyStore({ id: row.id, type });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      }
    },
    async handleTabClick() {
      console.log(this.activeName);
      if (this.activeName == '3') {
        this.recycle = '1';
      }
      if (this.activeName == '1') {
        this.recycle = '2';
      }
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    async fetchData() {
      var params = {
        page: this.page.currentPage,
        typeId: this.formInline.typeId,
        keyword: this.formInline.keyword,
        type: this.formInline.type,
        areaId: this.formInline.areaId,
        label: this.formInline.label,
        recycle: this.recycle
      };
      const { data, count, shopCount, url, shopNum, qq } = await storeList(params);
      this.list = data;
      this.shopCount = shopCount ? shopCount : '';
      this.url = url ? url : '';
      this.page.total = count;
      this.shopNum = shopNum;
      this.qqLinks = 'tencent://Message/?Uin=' + qq + '&websiteName=q-zone.qq.com&Menu=yes';
    },
    chickLogin() {
      // this.$router.push({path: '/login'})
      let routeData = this.$router.resolve({ path: '/login', query: {} });
      window.open(routeData.href, '_blank');
    },
    copyText(url) {
      let Url2 = url;
      var oInput = document.createElement('input');
      oInput.value = Url2;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand('Copy');
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    shopMange(row) {
      console.log('商家后台');
      sessionStorage.setItem('storeId', row.id);
      this.storeMsg(row.id);
      this.$router.push({ path: '/storeindex' });
    },
    shoparea(row) {
      if (row.id) {
        this.$router.push(`/storecitydistribution?storeId=${row.id}`);
      }
    }
  }
};
</script>
<style lang="scss">
.tablebtn .t_btn {
  /*padding: 4px 12px;*/
  border-right: none;
}

.tablebtn li:first-child {
  border-radius: 4px 0px 0px 4px;
}

.tablebtn li:last-child {
  border-right: 1px solid #dddfe2;
}

.tablebtn .el-dropdown {
  font-size: 12px;
}

.tablebtn .el-button {
  border: none !important;
}

.tablebtn .el-button:hover {
  background-color: #fff;
}

.storeItem {
  background: #fafdff;
  border: 1px solid #eceff1;
  border-radius: 5px;
}

.shimg {
  width: 65px;
  height: 72px;
}

.shtitle {
  font-size: 18px;
  font-weight: bold;
  color: #1d384d;
}

.codeimg {
  width: 100px;
  height: 100px;
}

.lllx .el-button {
  border-color: #155bd4;
  color: #155bd4;
}
.searchform .el-form-item__content .el-input {
  width: 180px;
}
</style>
